<template>
  <div class="table-column">
    <div class="column-table">
      <je-table
        ref="xTable"
        border
        stripe
        auto-resize
        show-overflow="ellipsis"
        keep-source
        show-header-overflow
        highlight-hover-row
        :data="tableColumndata.columnData"
        :sort-config="{
          trigger: 'cell',
          defaultSort: { field: 'age', order: 'desc' },
          orders: ['desc', 'asc', null],
        }"
        resizable
        height="100%"
        :edit-rules="validRules"
        :cell-style="cellStyle"
        :edit-config="{
          trigger: 'click',
          mode: 'cell',
          showStatus: true,
        }"
        :row-config="{ isCurrent: true, isHover: true }"
        :loading="loading"
        header-align="center"
        @sort-change="sortChange"
      >
        <je-column type="checkbox" width="40" align="center"></je-column>
        <je-column title="NO." type="seq" width="50" align="center"></je-column>
        <je-column
          field="TABLECOLUMN_ISCREATE"
          :title="$t('tableColumnView.createColumn')"
          width="50"
          align="center"
        >
          <template #default="{ row }">
            <span :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']">
              {{ row.TABLECOLUMN_ISCREATE == '1' ? '是' : '否' }}
            </span>
          </template>
        </je-column>
        <je-column
          field="TABLECOLUMN_NAME"
          :title="$t('tableColumnView.columnName')"
          :edit-render="inputRender"
          width="220"
          sortable
        >
          <template #edit="{ row }">
            <je-input
              v-model:value="row.TABLECOLUMN_NAME"
              @change="changeColumnName(row)"
            ></je-input>
          </template>
          <template #default="{ row }">
            <span
              :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']"
              v-html="formatSearchData(row.TABLECOLUMN_NAME)"
            >
            </span>
          </template>
        </je-column>
        <je-column
          field="TABLECOLUMN_CODE"
          :title="$t('tableColumnView.columnCode')"
          :edit-render="inputRender"
          width="260"
          sortable
        >
          <template #edit="{ row }">
            <je-input
              v-if="
                row.TABLECOLUMN_ISCREATE == '0' &&
                row.TABLECOLUMN_CLASSIFY == 'PRO' &&
                row.TABLECOLUMN_TYPE != 'ID'
              "
              v-model:value="row.TABLECOLUMN_CODE"
            ></je-input>
            <span v-else>
              <span
                style="margin-left: 10px"
                :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']"
              >
                {{ row.TABLECOLUMN_CODE }}
              </span>
              <i
                v-show="['FOREIGNKEY', 'CUSTOMFOREIGNKEY'].indexOf(row.TABLECOLUMN_TYPE) != -1"
                style="float: right; color: #4175d7"
                class="fal fa-key"
              ></i>
              <i
                v-show="['ID', 'CUSTOMID'].indexOf(row.TABLECOLUMN_TYPE) != -1"
                style="float: right; color: #f7a122"
                class="fal fa-key"
              ></i>
            </span>
          </template>
          <template #default="{ row }">
            <span
              :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']"
              v-html="formatSearchData(row.TABLECOLUMN_CODE)"
            >
            </span>
            <i
              v-show="['FOREIGNKEY', 'CUSTOMFOREIGNKEY'].indexOf(row.TABLECOLUMN_TYPE) != -1"
              style="float: right; color: #4175d7"
              class="fal fa-key"
            ></i>
            <i
              v-show="['ID', 'CUSTOMID'].indexOf(row.TABLECOLUMN_TYPE) != -1"
              style="float: right; color: #f7a122"
              class="fal fa-key"
            ></i>
          </template>
        </je-column>
        <je-column
          field="TABLECOLUMN_TYPE"
          :title="$t('tableColumnView.typeColumn')"
          :edit-render="{}"
          width="140"
        >
          <template #edit="{ row }">
            <je-select
              v-model:value="row.TABLECOLUMN_TYPE"
              style="width: 100%"
              :disabled="
                tableData.RESOURCETABLE_TYPE == 'VIEW' ||
                ['ID', 'CUSTOMID'].indexOf(row.TABLECOLUMN_TYPE) != -1
              "
            >
              <je-select-option
                v-for="item in dicItemsData.JE_FIELDTYPE"
                :key="item.code"
                :disabled="['ID', 'CUSTOMID'].indexOf(item.code) != -1"
                :value="item.code"
              >
                {{ item.text }}
              </je-select-option>
            </je-select>
          </template>
          <template #default="{ row }">
            <span :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']">
              {{ getSelectLabel(row.TABLECOLUMN_TYPE, dicItemsData.JE_FIELDTYPE, 'code', 'text') }}
            </span>
          </template>
        </je-column>
        <je-column
          field="TABLECOLUMN_LENGTH"
          :title="$t('tableColumnView.lengthColumn')"
          :edit-render="inputRender"
          width="120"
        >
          <template #edit="{ row }">
            <je-input
              v-model:value="row.TABLECOLUMN_LENGTH"
              style="width: 100%"
              :disabled="tableData.RESOURCETABLE_TYPE == 'VIEW' || row.TABLECOLUMN_TYPE == 'ID'"
            ></je-input>
          </template>
          <template #default="{ row }">
            <span :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']">
              {{ row.TABLECOLUMN_LENGTH }}
            </span>
          </template>
        </je-column>
        <je-column
          field="SY_ORDERINDEX"
          :title="$t('tableColumnView.orderColumn')"
          :edit-render="numberRender"
          width="80"
          align="center"
        >
          <template #edit="{ row }">
            <je-input-number
              v-model:value="row.SY_ORDERINDEX"
              :min="0"
              style="width: 100%"
            ></je-input-number>
          </template>
          <template #default="{ row }">
            <span :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']">
              {{ row.SY_ORDERINDEX }}
            </span>
          </template>
        </je-column>
        <!-- <je-column field="TABLECOLUMN_NAME_EN" title="其他语种" :edit-render="{}" width="142">
          <template #edit="{ row }">
            <je-input v-model:value="row.TABLECOLUMN_NAME_EN" type="text" />
          </template>
        </je-column> -->
        <je-column
          field="TABLECOLUMN_TREETYPE"
          :title="$t('tableColumnView.treeTypeColumn')"
          :edit-render="{}"
          align="center"
          width="130"
        >
          <template #edit="{ row }">
            <je-select
              v-model:value="row.TABLECOLUMN_TREETYPE"
              style="width: 100%"
              :disabled="
                tableData.RESOURCETABLE_TYPE == 'VIEW' ||
                row.TABLECOLUMN_TYPE == 'ID' ||
                tableData.RESOURCETABLE_TYPE == 'PT' ||
                row.TABLECOLUMN_CLASSIFY == 'SYS'
              "
              @change="xTable.$plugin.updateStatus(row)"
            >
              <je-select-option
                v-for="item in dicItemsData.JE_TREETYPE"
                :key="item.code"
                :value="item.code"
                :disabled="['ID'].indexOf(item.code) != -1"
                >{{ item.text }}</je-select-option
              >
            </je-select>
          </template>
          <template #default="{ row }">
            <span :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']">
              {{
                getSelectLabel(row.TABLECOLUMN_TREETYPE, dicItemsData.JE_TREETYPE, 'code', 'text')
              }}
            </span>
          </template>
        </je-column>
        <je-column
          field="TABLECOLUMN_ISNULL"
          :title="$t('tableColumnView.isNullColumn')"
          :edit-render="{}"
          width="100"
          align="center"
        >
          <template #edit="{ row }">
            <je-select
              v-model:value="row.TABLECOLUMN_ISNULL"
              style="width: 100%"
              :disabled="tableData.RESOURCETABLE_TYPE == 'VIEW' || row.TABLECOLUMN_TYPE == 'ID'"
            >
              <je-select-option
                v-for="item in tableColumndata.isNullOptions"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}</je-select-option
              >
            </je-select>
          </template>
          <template #default="{ row }">
            <span :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']">
              {{ getSelectLabel(row.TABLECOLUMN_ISNULL, tableColumndata.isNullOptions) }}
            </span>
          </template>
        </je-column>
        <je-column
          field="TABLECOLUMN_CLASSIFY"
          :title="$t('tableColumnView.classifyColumn')"
          width="80"
          align="center"
        >
          <template #default="{ row }">
            <span :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']">
              {{ row.TABLECOLUMN_CLASSIFY == 'PRO' ? '业务' : '系统' }}
            </span>
          </template>
        </je-column>
        <je-column
          field="SY_CREATEUSERNAME"
          :title="$t('tableColumnView.createUserNameColumn')"
          width="100"
          align="center"
        >
          <template #default="{ row }">
            <span :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']">
              {{ row.SY_CREATEUSERNAME }}
            </span>
          </template>
        </je-column>
        <je-column
          field="SY_CREATETIME"
          :title="$t('tableColumnView.createTimeColumn')"
          width="200"
          align="center"
        >
          <template #default="{ row }">
            <span :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']">
              {{ row.SY_CREATETIME }}
            </span>
          </template>
        </je-column>
        <je-column
          field="TABLECOLUMN_REMARK"
          :title="$t('tableColumnView.remarkColumn')"
          :edit-render="inputRender"
          min-width="220"
        >
          <template #edit="{ row }">
            <je-input v-model:value="row.TABLECOLUMN_REMARK" type="text" />
          </template>
          <template #default="{ row }">
            <span :class="[row.TABLECOLUMN_CLASSIFY == 'SYS' ? 'changeColor' : '']">
              {{ row.TABLECOLUMN_REMARK }}
            </span>
          </template>
        </je-column>
        <template #pager>
          <je-pager
            v-model:current-page="tablePage.currentPage"
            v-model:page-size="tablePage.pageSize"
            :page-sizes="tablePage.pageSizes"
            align="left"
            style="height: 40px; padding: 0 10px"
            background
            :size="size"
            :total="tablePage.totalResult"
            :layouts="['JumpNumber', 'Sizes', 'FullJump', 'Total', 'Refresh']"
            @load="onPageChange"
          />
        </template>
        <template #tbar>
          <je-toolbar style="border-top: 1px solid #e6e6e6">
            <je-button v-if="tableData.RESOURCETABLE_TYPE != 'VIEW'" type="text" @click="addColumn">
              <template #icon><i class="fal fa-plus-circle"></i></template>{{ $t('btnAddText') }}
            </je-button>
            <je-button
              v-if="tableData.RESOURCETABLE_TYPE != 'VIEW'"
              type="text"
              @click="deleteColumn"
            >
              <template #icon><i class="fal fa-times"></i></template>{{ $t('btnDeleteText') }}
            </je-button>
            <je-button type="text" @click="saveColumn">
              <template #icon><i class="fal fa-save"></i></template>{{ $t('btnSaveText') }}
            </je-button>
            <je-dropdown v-if="tableData.RESOURCETABLE_TYPE != 'VIEW'" :trigger="['click']">
              <template #overlay>
                <je-menu @click="handleMenuClick">
                  <je-menu-item key="assistDictionary">
                    <i style="margin-right: 5px" class="fal fa-book"></i>
                    {{ $t('tableColumnView.menuAssistDictionary') }}
                  </je-menu-item>
                  <!-- <je-menu-item key="cascadeDictionaryAssist">
                    <i style="margin-right: 5px" class="fal fa-book"></i>
                    {{ $t('tableColumnView.menuCascadeDictionaryAssist') }}
                  </je-menu-item> -->
                  <je-menu-item key="tableAssist">
                    <i style="margin-right: 5px" class="jeicon jeicon-table"></i>
                    {{ $t('tableColumnView.menuTableAssist') }}
                  </je-menu-item>
                  <je-menu-item key="userAssist">
                    <i style="margin-right: 5px" class="fal fa-user-plus"></i>
                    {{ $t('tableColumnView.menuUserAssist') }}
                  </je-menu-item>
                  <je-menu-item key="assistDept">
                    <i style="margin-right: 5px" class="fal fa-users"></i>
                    {{ $t('tableColumnView.menuAssistDept') }}
                  </je-menu-item>
                </je-menu>
              </template>
              <je-button type="text">
                <template #icon><i class="jeicon jeicon-plus-circle"></i></template>
                {{ $t('tableColumnView.BtnAddAuxiliaryFields') }}
                <i class="fal fa-angle-down"></i>
              </je-button>
            </je-dropdown>
            <je-dropdown v-if="tableData.RESOURCETABLE_TYPE != 'VIEW'" :trigger="['click']">
              <template #overlay>
                <je-menu @click="handleMenuAddClick">
                  <je-menu-item key="create">
                    <i style="margin-right: 5px" class="fal fa-text"></i>
                    {{ $t('tableColumnView.menuCreate') }}
                  </je-menu-item>
                  <je-menu-item key="update">
                    <i style="margin-right: 5px" class="fal fa-text"></i>
                    {{ $t('tableColumnView.menuUpdate') }}
                  </je-menu-item>
                  <je-menu-item key="extend">
                    <i style="margin-right: 5px" class="fal fa-text"></i>
                    {{ $t('tableColumnView.menuExtend') }}
                  </je-menu-item>
                  <je-menu-item key="workFlowBase">
                    <i style="margin-right: 5px" class="fal fa-text"></i>
                    {{ $t('tableColumnView.menuWorkFlowBase') }}
                  </je-menu-item>
                  <je-menu-item key="workFlowExtend">
                    <i style="margin-right: 5px" class="fal fa-text"></i>
                    {{ $t('tableColumnView.menuWorkFlowExtend') }}
                  </je-menu-item>
                  <SecurityTable ref="securityMenuItem"></SecurityTable>
                </je-menu>
              </template>
              <je-button type="text">
                <template #icon><i class="fal fa-plus-square"></i></template>
                {{ $t('tableColumnView.btnAddSysField') }}
                <i class="fal fa-angle-down"></i>
              </je-button>
            </je-dropdown>
            <je-button type="text" @click="updateFileKey">
              <template #icon><i class="fal fa-code"></i></template>
              {{ $t('tableColumnView.btnUpdateFileKey') }}
            </je-button>
            <je-button type="text" @click="exportColumn"
              ><template #icon><i class="fal fa-file-excel"></i></template
              >{{ $t('leftTree.export') }}
            </je-button>
            <TbFill />
            <je-input-search
              v-model:value="searchValue"
              :placeholder="$t('searchText')"
              style="width: 280px"
              :allow-clear="allowclear"
              :enter-button="$t('searchText')"
              @search="queryColumn"
            >
              <template #prefix> <i class="fal fa-search" /> </template>
            </je-input-search>
          </je-toolbar>
        </template>
      </je-table>
    </div>
    <DictionaryAssist
      v-if="modalType == 'assistDictionary' || modalType == 'assistDept'"
      :modal-show="modalType"
      :table-data="tableData"
      @changeData="changeData"
    />
    <CascadeDictionaryAssist
      v-if="modalType == 'cascadeDictionaryAssist'"
      :table-data="tableData"
      @changeData="changeData"
    />
    <UpdateKey
      v-if="modalType == 'updateKey'"
      :modal-show="modalType == 'updateKey'"
      :modal-data="tableData"
      :product-data="productData"
      @changeData="changeData"
    />
    <TableAssist
      v-if="modalType == 'tableAssist' || modalType == 'userAssist'"
      :modal-show="modalType"
      :modal-data="tableData"
      @changeData="changeData"
    />
    <DesignExport
      v-if="modalType == 'export'"
      :modal-show="modalType == 'export'"
      :modal-data="tableData"
      :parent-table="xTable"
      @changeData="changeData"
    />
  </div>
</template>
<script>
  import { defineComponent, ref, onMounted, watch, reactive, nextTick } from 'vue';
  import {
    Button,
    Menu,
    Dropdown,
    Grid,
    Input,
    Select,
    InputNumber,
    Modal,
    Pager,
    Toolbar,
  } from '@jecloud/ui';
  import DictionaryAssist from '../../components/modal/dictionary-assist.vue';
  import CascadeDictionaryAssist from '../../components/modal/cascade-dictionary-assist.vue';
  import UpdateKey from './modal/updatekey.vue';
  import TableAssist from '../../components/modal/table-assist.vue';
  import { pinyin, isEmpty, loadDDItemByCode, isNotEmpty } from '@jecloud/utils';
  import DesignExport from './modal/export.vue';
  import VueEvent from '../../helper/model/event';
  import {
    verifyData,
    JE_TABLE_PAGESIZES,
    JE_TABLECLOUMN_SELECTOPTIONS,
  } from '../../helper/common';
  import { inputRender, numberRender } from '../../helper/edit-render';

  import {
    getColumnData,
    addTableColumn,
    addNewColumn,
    removeColumn,
    updateColmunList,
  } from '../../api/index';
  import SecurityTable from './security-table';
  export default defineComponent({
    name: 'TableColumn',
    components: {
      JeButton: Button,
      JeMenu: Menu,
      JeMenuItem: Menu.Item,
      JeDropdown: Dropdown,
      JeTable: Grid,
      JeColumn: Grid.Column,
      JeInput: Input,
      JeInputNumber: InputNumber,
      JeInputSearch: Input.Search,
      JeSelect: Select,
      JeSelectOption: Select.Option,
      JePager: Pager,
      DictionaryAssist,
      CascadeDictionaryAssist,
      UpdateKey,
      TableAssist,
      DesignExport,
      JeToolbar: Toolbar,
      TbFill: Toolbar.Fill,
      SecurityTable,
    },
    props: {
      tabKey: {
        type: String,
        default: '',
      },
      tableInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      columnSave: {
        type: Boolean,
        default: true,
      },
      columnApplySave: {
        type: Boolean,
        default: true,
      },
      refreshColumn: {
        type: Boolean,
        default: true,
      },
      productData: {
        type: Object,
        required: true,
        default: () => {
          return {};
        },
      },
    },
    emits: ['refreshHistory', 'callColumnSave'],
    setup(props, { emit }) {
      const modalType = ref('');
      const tabKey = ref(props.tabKey);
      let tableData = ref(props.tableInfo);
      const xTable = ref(null);
      const searchValue = ref('');
      const tableColumndata = reactive({ columnData: [], typeOptions: [] });
      const securityMenuItem = ref();
      // 关键字搜索标识
      const keywordQuery = ref(false);
      const tablePage = reactive({
        currentPage: 1,
        pageSize: 50,
        pageSizes: JE_TABLE_PAGESIZES,
        totalResult: 30,
      });
      const loading = ref(true);
      //排序条件
      const orderInfo = reactive({ order: '', property: '' });

      watch(
        () => props.columnSave,
        () => {
          saveColumn('save');
        },
      );
      watch(
        () => props.columnApplySave,
        () => {
          saveColumn('apply');
        },
      );

      //分页条切换页数
      const onPageChange = () => {
        //tablePage.currentPage = page;
        getColumnDatas('page');
      };

      //获得表格数据
      const getColumnDatas = (type) => {
        if (type == 'page') {
          loading.value = true;
        }
        const j_query = {
          custom: [{ type: '=', code: 'TABLECOLUMN_RESOURCETABLE_ID', value: tabKey.value }],
          order: [
            { code: 'TABLECOLUMN_ISCREATE', type: 'ASC' },
            { code: 'SY_ORDERINDEX', type: 'ASC' },
          ],
        };
        //搜索框搜索参数拼接
        if (type == 'query' && isNotEmpty(searchValue.value)) {
          j_query.custom.push({
            type: 'and',
            value: [
              {
                type: 'like',
                code: 'TABLECOLUMN_NAME',
                value: searchValue.value.trim() || '',
                cn: 'or',
              },
              {
                type: 'like',
                code: 'TABLECOLUMN_CODE',
                value: searchValue.value.trim() || '',
                cn: 'or',
              },
            ],
          });
          keywordQuery.value = true;
        } else {
          keywordQuery.value = false;
        }
        //排序条件拼接
        if (orderInfo.order != '' || orderInfo.property != '') {
          j_query.order.push({ code: orderInfo.property, type: orderInfo.order });
        }
        const params = {
          tableCode: 'JE_CORE_TABLECOLUMN',
          j_query: JSON.stringify(j_query),
          page: tablePage.currentPage,
          start: (tablePage.currentPage - 1) * tablePage.pageSize,
          limit: tablePage.pageSize,
        };
        getColumnData(params)
          .then((data) => {
            if (type && searchValue.value) {
              searchType.value = true;
            }
            tableColumndata.columnData = data.rows;
            tablePage.totalResult = data.totalCount;
            loading.value = false;
          })
          .catch((e) => {
            Modal.alert(e.message, 'error');
          });
      };

      // 获得数据字典数据
      const dicItemsData = reactive({ JE_FIELDTYPE: [], JE_TREETYPE: [] });
      const getDicItemDatas = () => {
        ['JE_FIELDTYPE', 'JE_TREETYPE'].forEach((code) => {
          loadDDItemByCode(code).then((data) => {
            dicItemsData[code] = data;
          });
        });
      };
      onMounted(() => {
        //类型下拉框数据
        nextTick(() => {
          getDicItemDatas();
          getColumnDatas();

          tableColumndata.typeOptions = JE_TABLECLOUMN_SELECTOPTIONS.typeOptions;
          tableColumndata.treeTypeOptions = JE_TABLECLOUMN_SELECTOPTIONS.treeTypeOptions;
          tableColumndata.isNullOptions = JE_TABLECLOUMN_SELECTOPTIONS.isNullOptions;
        });
      });

      //根据条件改变单元格的样式
      const cellStyle = ({ row, column }) => {
        switch (column.property) {
          //创建列
          case 'TABLECOLUMN_ISCREATE':
            return { backgroundColor: row.TABLECOLUMN_ISCREATE == '1' ? '#e0ffeb' : '#faf9da' };
          //允许为空列
          case 'TABLECOLUMN_ISNULL':
            return { backgroundColor: row.TABLECOLUMN_ISNULL == '1' ? '#e0ffeb' : '#faf9da' };
          //分类列
          case 'TABLECOLUMN_CLASSIFY':
            return {
              backgroundColor: row.TABLECOLUMN_CLASSIFY == 'PRO' ? 'rgb(251 198 198)' : '#B5E9FD',
            };
        }
      };
      //列表字段正则验证
      const validRules = ref({
        TABLECOLUMN_CODE:
          tableData.value.RESOURCETABLE_TYPE == 'VIEW' ||
          tableData.value.RESOURCETABLE_IMPORT == '1'
            ? verifyData.importCode
            : verifyData.code,
        TABLECOLUMN_LENGTH: [
          {
            max: 40,
            message: '不能大于40个字符',
          },
          {
            pattern: '^[^\\\\/*?:."\'<>|\x22]+$',
            message: '不能输入非法字符',
          },
        ],
      });
      watch(
        () => props.tableInfo,
        (newVal) => {
          tableData.value = newVal;
          if (newVal.RESOURCETABLE_TYPE == 'VIEW' || newVal.RESOURCETABLE_IMPORT == '1') {
            validRules.value.TABLECOLUMN_CODE = verifyData.importCode;
          } else {
            validRules.value.TABLECOLUMN_CODE = verifyData.code;
          }
        },
        { immediate: true, deep: true },
      );

      //搜索框回车查询
      const queryColumn = (e) => {
        searchType.value = false;
        getColumnDatas('query');
      };

      watch(
        () => props.refreshColumn,
        () => {
          getColumnDatas();
        },
      );
      watch(
        () => searchValue.value,
        (newVal) => {
          if (!newVal) {
            searchType.value = false;
          }
        },
      );

      //添加操作
      const addColumn = () => {
        const $table = getXTable();
        const params = {
          RESOURCETABLE_TABLECODE: tableData.value.RESOURCETABLE_TABLECODE,
          JE_CORE_RESOURCETABLE_ID: tabKey.value,
        };
        addTableColumn(params)
          .then(async (data) => {
            //关闭弹窗
            //getColumnDatas();
            //$table.insert(data.data);
            const { row: newRow } = await $table.insert(data.data);
            await $table.setActiveCell(newRow, 'TABLECOLUMN_NAME');
            tablePage.totalResult++;

            Modal.notice(data.message, 'success');
            emit('refreshHistory');
          })
          .catch((e) => {
            Modal.alert(e.message, 'error');
          });
      };

      //删除操作
      const deleteColumn = () => {
        const $table = getXTable();
        const checkboxRecords = $table.getCheckboxRecords();
        if (checkboxRecords.length <= 0) {
          return Modal.alert('请选择要删除的数据！', 'warning');
        } else {
          //不能删除主键
          for (let index = 0; index < checkboxRecords.length; index++) {
            const record = checkboxRecords[index];
            if (record.TABLECOLUMN_TYPE == 'ID') {
              Modal.alert('主键不能删除，请重新选择！', 'warning');
              return false;
            }
          }
        }

        Modal.confirm('是否删除数据?', () => {
          const ids = [];
          checkboxRecords.forEach((record) => {
            ids.push(record.JE_CORE_TABLECOLUMN_ID);
          });
          if (ids.length <= 0) {
            return;
          }
          removeColumn(
            {
              ids: ids.join(','),
              TABLECOLUMN_TABLECODE: tableData.value.RESOURCETABLE_TABLECODE,
              SY_PRODUCT_ID: props.productData.productId,
            },
            {
              pd: props.productData.productCode,
            },
          )
            .then((data) => {
              Modal.notice(data.message, 'success');
              // getColumnDatas();
              $table.remove(checkboxRecords);
              tablePage.totalResult = tablePage.totalResult - checkboxRecords.length;
              emit('refreshHistory', 'all');
              // 如果删除的字段有表格键关联关系,需刷新列表
              if (data.data == 'refresh') {
                VueEvent.emit('loadData', {
                  type: 'loadTree',
                });
              }
            })
            .catch((e) => {
              Modal.alert(e.message, 'error');
            });
        });
      };

      //保存操作
      const saveColumn = async (type) => {
        //列表校验
        const $table = getXTable();
        const insertRecords = $table.getInsertRecords();
        let updateRecords = $table.getUpdateRecords();
        updateRecords = updateRecords.concat(insertRecords);
        const errMap = await $table.validate(updateRecords);
        //验证没有通过
        if (errMap) {
          if (type == 'apply') {
            emit('callColumnSave', 'notApply');
          }
          if (type == 'save') {
            emit('callColumnSave');
          }
          return false;
        } else {
          if (updateRecords && updateRecords.length > 0) {
            updateColmunList({
              strData: JSON.stringify(updateRecords),
            })
              .then((data) => {
                if (type != 'apply' && type != 'save') {
                  Modal.notice(data.message, 'success');
                }
                // 进行关键字搜索刷新数据
                if (isNotEmpty(searchValue.value) && keywordQuery.value) {
                  getColumnDatas('query');
                } else {
                  getColumnDatas();
                }

                emit('refreshHistory');
                if (type == 'apply') {
                  emit('callColumnSave', 'doApply');
                }
                if (type == 'save') {
                  emit('callColumnSave', 'dosave');
                }
              })
              .catch((e) => {
                if (type == 'apply') {
                  emit('callColumnSave', 'notApply');
                }
                if (type == 'save') {
                  emit('callColumnSave');
                }
                Modal.alert(e.message, 'error');
              });
          } else {
            if (type == 'apply') {
              emit('callColumnSave', 'doApply');
            }
            if (type == 'save') {
              emit('callColumnSave');
            }
            if (type != 'apply' && type != 'save') {
              Modal.notice('无数据操作!', 'info');
            }
          }
        }
      };

      //更换主键名操作
      const updateFileKey = () => {
        modalType.value = 'updateKey';
      };

      //导出操作
      const exportColumn = () => {
        modalType.value = 'export';
      };

      const handleMenuClick = (e) => {
        const key = e.key;
        modalType.value = key;
      };

      const handleMenuAddClick = (e) => {
        const key = e.key;
        // 密级管理
        if (securityMenuItem.value?.key === key) {
          securityMenuItem.value
            .addField({ JE_CORE_RESOURCETABLE_ID: tabKey.value })
            .then((data) => {
              Modal.notice(data.message, 'success');
              getColumnDatas();
            })
            .catch((e) => {
              Modal.alert(e.message, 'error');
            });
        } else if (key && key != '') {
          addNewColumn({
            JE_CORE_RESOURCETABLE_ID: tabKey.value,
            type: key,
          })
            .then((data) => {
              Modal.notice(data.message, 'success');
              getColumnDatas();
            })
            .catch((e) => {
              Modal.alert(e.message, 'error');
            });
        }
      };

      const changeData = (type) => {
        modalType.value = '';
        if (type == 'add') {
          getColumnDatas();
          //如果是修改主键需要刷新表格键/表索引
        } else if (type == 'addKey') {
          getColumnDatas();
          emit('refreshHistory', 'addKey');
        }
      };

      //列表单元格格式化
      const getSelectLabel = (value, list, valueProp = 'value', labelField = 'label') => {
        const item = list.find((item) => item[valueProp] === value);
        return item ? item[labelField] : null;
      };

      //获得列表对象
      const getXTable = () => {
        return xTable.value.$plugin;
      };

      //监听类名称的值改变事件
      const changeColumnName = (row) => {
        //字段没有创建
        if (
          row.TABLECOLUMN_ISCREATE != '1' &&
          row.TABLECOLUMN_CLASSIFY != 'SYS' &&
          isEmpty(row.TABLECOLUMN_SOURCE)
        ) {
          const tabelArray = tableData.value.RESOURCETABLE_TABLECODE.split('_');
          const fieldPrefix = tabelArray[tabelArray.length - 1];
          row.TABLECOLUMN_CODE = fieldPrefix + '_' + pinyin(row.TABLECOLUMN_NAME, 'PY');
        }
      };

      //列表排序
      const sortChange = (data) => {
        if (data.order != null) {
          orderInfo.order = data.order;
          orderInfo.property = data.property;
        } else {
          orderInfo.order = '';
          orderInfo.property = '';
        }
        getColumnDatas();
      };
      const searchType = ref(false);
      const formatSearchData = (name) => {
        let text = name;
        if (name && name != undefined && searchValue.value.length > 0 && searchType.value) {
          var re = new RegExp(searchValue.value, 'g');
          let replaceString = '<span style="color:red;">' + searchValue.value + '</span>';
          text = name.replace(re, replaceString);
        }
        return text;
      };

      return {
        securityMenuItem,
        addColumn,
        deleteColumn,
        saveColumn,
        updateFileKey,
        exportColumn,
        handleMenuClick,
        handleMenuAddClick,
        modalType,
        changeData,
        tableData,
        xTable,
        searchValue,
        queryColumn,
        cellStyle,
        tableColumndata,
        getSelectLabel,
        validRules,
        getXTable,
        tablePage,
        onPageChange,
        changeColumnName,
        sortChange,
        orderInfo,
        allowclear: true,
        loading,
        lauoutOptions: { tbar: { size: 40 } },
        size: ref('middle'),
        inputRender,
        numberRender,
        formatSearchData,
        searchType,
        dicItemsData,
      };
    },
  });
</script>
<style lang="less" scoped>
  .table-column {
    height: 100%;
    .columntop-button {
      display: flex;
      border-top: 1px solid #e6e6e6;
      justify-content: space-between;
      height: 40px;
      line-height: 39px;
      padding-right: 16px;
      padding-left: 4px;
    }
    .column-table {
      height: 100%;
      .changeColor {
        color: #3265f5 !important;
      }
      .vxe-table--render-default .vxe-table--border-line {
        border-left: 0 !important;
      }
      .vxe-body--row .vxe-body--column .vxe-cell .fal.fa-key {
        line-height: revert !important;
        position: absolute;
        right: 5px;
      }
    }
  }
</style>
<style lang="less">
  .table-column {
    .column-table {
      .vxe-table--render-default .vxe-table--border-line {
        border-left: 0 !important;
        border-right: 0 !important;
      }
      /* .vxe-table--render-default .vxe-body--column.col--ellipsis > .vxe-cell {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      } */
    }
    .jeicon {
      font-size: 14px !important;
    }
    .ant-input-search {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
    .ant-input-search.ant-input-affix-wrapper:hover {
      border: 1px solid #5c8dff !important;
      box-shadow: none !important;
    }
    .ant-input-search.ant-input-affix-wrapper-focused {
      border: 1px solid #5c8dff !important;
      box-shadow: none !important;
    }
    .ant-input-search-button {
      width: 60px;
    }
  }
</style>
